<!DOCTYPE html>
<html lang="zh-CN" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Git与代码托管平台入门</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">

    <style>
        :root {
            --bg: #f8fafc;
            --ink: #0f172a;
            --muted: #64748b;
            --card: #ffffff;
            --line: #e5e7eb;
            --brand: #004AAD;
            --brand-light: #CDE6FF;
            --accent-purple: #58508d;
            --accent-magenta: #bc5090;
            --accent-red: #ff6361;
            --accent-orange: #ffa600;
        }
        body {
            font-family: 'Noto Sans SC', 'Inter', sans-serif;
            background-color: var(--bg);
            color: var(--ink);
        }

        .hero {
            background: var(--brand);
            color: #fff;
            text-align: center;
            padding: 56px 16px 64px;
        }
        .hero h1 {
            margin: 0 0 8px;
            font-size: 32px;
            line-height: 1.2;
            font-weight: 900;
        }
        @media (min-width:768px) {
            .hero h1 {
                font-size: 40px
            }
        }
        .hero .lead {
            color: var(--brand-light);
            font-size: 18px;
            max-width: 900px;
            margin: 0 auto;
        }

        .section-title {
            font-size: 2.25rem; /* 36px */
            font-weight: 700;
            text-align: center;
            color: var(--ink);
            margin-bottom: 1rem;
        }
        .section-subtitle {
            font-size: 1.25rem; /* 20px */
            text-align: center;
            color: var(--muted);
            margin-bottom: 3rem;
            max-width: 900px;
            margin-left: auto;
            margin-right: auto;
        }

        .quote {
            text-align: center;
            font-size: 1.5rem; /* 24px */
            font-style: italic;
            font-weight: 500;
            color: var(--muted);
            border-left: 4px solid var(--brand);
            padding: 1rem 1.5rem;
            max-width: 900px;
            margin: 4rem auto; /* my-16 */
            background-color: var(--card);
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
    </style>
</head>
<body class="antialiased">

    <header class="hero">
        <h1>第三章：Git与代码托管平台入门</h1>
        <p class="lead">从本地版本控制到全球“社交化编程”</p>
    </header>

    <!-- 2. 主内容容器 -->
    <div class="container mx-auto p-4 md:p-8">

        <section id="objectives" class="my-16">
            <h2 class="section-title">本章学习目标</h2>
            <p class="section-subtitle">通过本章学习，学生应能够：</p>
            <div class="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
                <!-- 目标 1 -->
                <div class="bg-white rounded-xl shadow-lg p-6 flex items-start gap-4 border-l-4 border-[var(--brand)]">
                    <div class="text-4xl">📚</div>
                    <div>
                        <h3 class="text-xl font-semibold mb-1">理解版本控制</h3>
                        <p class="text-[var(--muted)]">掌握版本控制的基本概念、重要性和发展历程</p>
                    </div>
                </div>
                <!-- 目标 2 -->
                <div class="bg-white rounded-xl shadow-lg p-6 flex items-start gap-4 border-l-4 border-[var(--accent-purple)]">
                    <div class="text-4xl">🔧</div>
                    <div>
                        <h3 class="text-xl font-semibold mb-1">掌握Git核心</h3>
                        <p class="text-[var(--muted)]">理解Git的核心理论、工作流程和基本操作命令</p>
                    </div>
                </div>
                <!-- 目标 3 -->
                <div class="bg-white rounded-xl shadow-lg p-6 flex items-start gap-4 border-l-4 border-[var(--accent-red)]">
                    <div class="text-4xl">🚀</div>
                    <div>
                        <h3 class="text-xl font-semibold mb-1">实践GitCode流程</h3>
                        <p class="text-[var(--muted)]">在GitCode上完成从创建仓库到提交PR的完整流程</p>
                    </div>
                </div>
                <!-- 目标 4 -->
                <div class="bg-white rounded-xl shadow-lg p-6 flex items-start gap-4 border-l-4 border-[var(--accent-orange)]">
                    <div class="text-4xl">🤝</div>
                    <div>
                        <h3 class="text-xl font-semibold mb-1">体验开源协作</h3>
                        <p class="text-[var(--muted)]">初步体验在开源社区中通过Issue与他人协作交流</p>
                    </div>
                </div>
            </div>
        </section>

        <section id="vcs" class="my-16">
            <h2 class="section-title"><span class="mr-3">🤔</span> 什么是版本控制 (VC)?</h2>
            <!-- 卡片 -->
            <div class="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto mb-16">
                <div class="bg-white rounded-xl shadow-lg p-8 border-t-4 border-[var(--accent-purple)]">
                    <h3 class="text-xl font-semibold mb-2">VC 是什么?</h3>
                    <p class="text-[var(--muted)]">一个系统地记录一个或多个文件内容变化，以便将来查阅特定版本修订情况的系统。简而言之，它是项目的“历史记录仪”。</p>
                </div>
                <div class="bg-white rounded-xl shadow-lg p-8 border-t-4 border-[var(--accent-magenta)]">
                    <h3 class="text-xl font-semibold mb-2">为什么至关重要?</h3>
                    <ul class="list-disc list-inside text-[var(--muted)] space-y-1">
                        <li><strong>团队协作:</strong> 多人同时工作不冲突。</li>
                        <li><strong>历史追溯:</strong> 查看谁、何时、为何做了修改。</li>
                        <li><strong>高效调试:</strong> 快速定位引入Bug的变更。</li>
                        <li><strong>安全网:</strong> 随时可以“回滚”到任一历史版本。</li>
                    </ul>
                </div>
            </div>

            <h3 class="text-2xl font-bold text-center mb-10 text-[var(--ink)]">版本控制演进历程</h3>
            <div class="relative max-w-3xl mx-auto">
                <!-- 竖线 -->
                <div class="absolute left-4 top-0 h-full w-0.5 bg-gray-200" aria-hidden="true"></div>
                <!-- 节点 1 -->
                <div class="relative pl-12 mb-8">
                    <div class="absolute left-0 top-1 w-8 h-8 rounded-full bg-[var(--brand)] text-white flex items-center justify-center font-bold ring-8 ring-white">1</div>
                    <div class="bg-white rounded-lg shadow-md p-5 border border-gray-100">
                        <h4 class="font-bold text-lg text-[var(--brand)]">第一代：本地版本控制系统 (LVCS)</h4>
                        <p class="text-sm font-semibold text-gray-500 my-1">1970s-1980s | 代表工具：SCCS, RCS</p>
                        <p class="text-[var(--muted)] text-sm">单机工具，缺乏网络功能，无法满足团队协作需求</p>
                    </div>
                </div>
                <!-- 节点 2 -->
                <div class="relative pl-12 mb-8">
                    <div class="absolute left-0 top-1 w-8 h-8 rounded-full bg-[var(--accent-orange)] text-white flex items-center justify-center font-bold ring-8 ring-white">2</div>
                    <div class="bg-white rounded-lg shadow-md p-5 border border-gray-100">
                        <h4 class="font-bold text-lg text-[var(--accent-orange)]">第二代：集中式版本控制系统 (CVCS)</h4>
                        <p class="text-sm font-semibold text-gray-500 my-1">1990s-2000s | 代表工具：CVS, Subversion (SVN)</p>
                        <p class="text-[var(--muted)] text-sm">引入中央服务器，解决协作问题，但存在单点故障风险</p>
                    </div>
                </div>
                <!-- 节点 3 -->
                <div class="relative pl-12">
                    <div class="absolute left-0 top-1 w-8 h-8 rounded-full bg-[var(--accent-red)] text-white flex items-center justify-center font-bold ring-8 ring-white">3</div>
                    <div class="bg-white rounded-lg shadow-md p-5 border border-gray-100">
                        <h4 class="font-bold text-lg text-[var(--accent-red)]">第三代：分布式版本控制系统 (DVCS)</h4>
                        <p class="text-sm font-semibold text-gray-500 my-1">2005年至今 | 代表工具：Git, Mercurial</p>
                        <p class="text-[var(--muted)] text-sm">每个开发者拥有完整仓库副本，支持离线工作，分支管理强大</p>
                        <p class="text-[var(--muted)] text-sm mt-2 pt-2 border-t border-gray-200"><strong>Git的起源:</strong> 2005年，Linux创始人Linus Torvalds因原有的商业VCS (BitKeeper) 收回授权，在危机中仅用约两周时间创造了Git，以满足Linux内核开发的庞大需求。</p>
                    </div>
                </div>
            </div>
        </section>

        <section id="workflow" class="my-16 bg-white rounded-2xl shadow-xl p-8 md:p-12">
            <h2 class="section-title"><span class="mr-3">⚙️</span> Git 的核心工作流：三大区域</h2>
            <p class="section-subtitle">Git 的精髓在于其“暂存区”的设计，它让你能精确控制每一次“提交”的内容。</p>
            <div class="grid grid-cols-1 md:grid-cols-5 items-stretch gap-6 text-center">
                <!-- 1. 工作区 -->
                <div class="bg-blue-50 rounded-lg p-6 shadow-inner border border-blue-200 flex flex-col justify-center">
                    <h3 class="text-xl font-semibold text-[var(--brand)]">1. 工作区</h3>
                    <p class="text-sm text-[var(--muted)] mt-1">你实际看到和编辑文件的目录。</p>
                </div>

                <div class="flex flex-col items-center justify-center transform md:rotate-0 rotate-90">
                    <code class="text-sm font-bold text-[var(--muted)] bg-gray-100 px-2 py-1 rounded">git add</code>
                    <span class="text-4xl text-[var(--brand)] font-light">&rarr;</span>
                </div>
                <!-- 2. 暂存区 -->
                <div class="bg-blue-50 rounded-lg p-6 shadow-inner border border-blue-200 flex flex-col justify-center">
                    <h3 class="text-xl font-semibold text-[var(--brand)]">2. 暂存区</h3>
                    <p class="text-sm text-[var(--muted)] mt-1">“购物车”，存放下次提交的快照。</p>
                </div>

                <div class="flex flex-col items-center justify-center transform md:rotate-0 rotate-90">
                    <code class="text-sm font-bold text-[var(--muted)] bg-gray-100 px-2 py-1 rounded">git commit</code>
                    <span class="text-4xl text-[var(--brand)] font-light">&rarr;</span>
                </div>
                <!-- 3. 本地仓库 -->
                <div class="bg-blue-50 rounded-lg p-6 shadow-inner border border-blue-200 flex flex-col justify-center">
                    <h3 class="text-xl font-semibold text-[var(--brand)]">3. 本地仓库</h3>
                    <p class="text-sm text-[var(--muted)] mt-1">项目的完整历史数据库。</p>
                </div>
            </div>
        </section>

        <section id="branching" class="my-16">
            <h2 class="section-title"><span class="mr-3">🌿</span> 分支管理：Git 的超能力</h2>
            <div class="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto mb-12">
                <div class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-[var(--accent-purple)]">
                    <h3 class="text-xl font-semibold mb-2">什么是分支?</h3>
                    <p class="text-[var(--muted)]">一个轻量级的“可移动指针”。它允许你在不影响主线 (<code>main</code>) 的情况下，安全地进行并行开发和实验。</p>
                </div>
                <div class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-[var(--accent-magenta)]">
                    <h3 class="text-xl font-semibold mb-2">基本流程</h3>
                    <ol class="list-decimal list-inside text-[var(--muted)] space-y-1">
                        <li><strong>创建并切换:</strong> <code>git checkout -b new-feature</code></li>
                        <li><strong>工作:</strong> 编辑、<code>add</code>、<code>commit</code>...</li>
                        <li><strong>切回主线:</strong> <code>git checkout main</code></li>
                        <li><strong>合并:</strong> <code>git merge new-feature</code></li>
                    </ol>
                </div>
            </div>

            <div class="max-w-3xl mx-auto bg-white rounded-xl shadow-xl p-4 md:p-6 border border-gray-200">
                <img src="chapter3-git-branch-magement.svg" alt="Git分支管理逻辑示意图" class="w-full h-auto">
                <p class="text-center text-sm text-[var(--muted)] mt-4"><i>图：Git分支管理逻辑示意图</i></p>
            </div>
        </section>

        <section id="remote" class="my-16">
            <h2 class="section-title"><span class="mr-3">🌐</span> 远程协作：与团队同步</h2>
            <p class="section-subtitle">Git 是分布式的，代码托管平台 (如 GitCode) 是团队代码的“交汇点”。</p>
            <div class="grid md:grid-cols-2 gap-8 max-w-3xl mx-auto">
                <div class="bg-white rounded-xl shadow-lg p-8 text-center border-t-4 border-[var(--brand)]">
                    <h3 class="text-2xl font-bold mb-3">⬇️ 拉取 (Pull)</h3>
                    <code class="text-lg font-bold bg-gray-100 text-[var(--brand)] px-3 py-1 rounded">git pull</code>
                    <p class="text-[var(--muted)] mt-3">从远程仓库获取最新更新，并自动合并到你的本地工作区。 (相当于 <code>fetch</code> + <code>merge</code>)</p>
                </div>
                <div class="bg-white rounded-xl shadow-lg p-8 text-center border-t-4 border-[var(--accent-red)]">
                    <h3 class="text-2xl font-bold mb-3">⬆️ 推送 (Push)</h3>
                    <code class="text-lg font-bold bg-gray-100 text-[var(--accent-red)] px-3 py-1 rounded">git push</code>
                    <p class="text-[var(--muted)] mt-3">将你的本地提交 (commits) 上传到远程仓库，与团队分享你的工作成果。</p>
                </div>
            </div>
        </section>

        <section id="pr-flow" class="my-16 bg-white rounded-2xl shadow-xl p-8 md:p-12">
            <h2 class="section-title"><span class="mr-3">🤝</span> “社交化编程”：Pull Request (PR) 完整流程</h2>
            <p class="section-subtitle">这是开源社区和现代团队协作的核心。你不能直接修改别人的项目，而是通过“拉取请求”来贡献你的代码。</p>
            <div class="max-w-2xl mx-auto space-y-4">
                <!-- PR 步骤 -->
                <div class="flex items-center gap-4 bg-orange-50 p-4 rounded-lg border border-orange-200">
                    <div class="flex-shrink-0 w-10 h-10 rounded-full bg-[var(--accent-orange)] text-white text-xl font-bold flex items-center justify-center">1</div>
                    <div>
                        <h3 class="text-lg font-semibold text-orange-900">Fork (复刻)</h3>
                        <p class="text-orange-800 text-sm">在 GitCode 平台上，创建一份你自己的项目副本。</p>
                    </div>
                </div>
                <div class="flex items-center gap-4 bg-orange-50 p-4 rounded-lg border border-orange-200">
                    <div class="flex-shrink-0 w-10 h-10 rounded-full bg-[var(--accent-orange)] text-white text-xl font-bold flex items-center justify-center">2</div>
                    <div>
                        <h3 class="text-lg font-semibold text-orange-900">Clone (克隆)</h3>
                        <p class="text-orange-800 text-sm">将<strong>你自己的 Fork</strong> 下载到本地电脑。</p>
                    </div>
                </div>
                <div class="flex items-center gap-4 bg-orange-50 p-4 rounded-lg border border-orange-200">
                    <div class="flex-shrink-0 w-10 h-10 rounded-full bg-[var(--accent-orange)] text-white text-xl font-bold flex items-center justify-center">3</div>
                    <div>
                        <h3 class="text-lg font-semibold text-orange-900">Branch (创建分支)</h3>
                        <p class="text-orange-800 text-sm">在本地创建新分支 (<code>git checkout -b ...</code>) 来进行修改。</p>
                    </div>
                </div>
                <div class="flex items-center gap-4 bg-orange-50 p-4 rounded-lg border border-orange-200">
                    <div class="flex-shrink-0 w-10 h-10 rounded-full bg-[var(--accent-orange)] text-white text-xl font-bold flex items-center justify-center">4</div>
                    <div>
                        <h3 class="text-lg font-semibold text-orange-900">Work (工作)</h3>
                        <p class="text-orange-800 text-sm">修改代码，然后 <code>git add</code> 和 <code>git commit</code>。</p>
                    </div>
                </div>          <!-- 箭头 2 -->
                <div class="flex items-center gap-4 bg-orange-50 p-4 rounded-lg border border-orange-200">
                    <div class="flex-shrink-0 w-10 h-10 rounded-full bg-[var(--accent-orange)] text-white text-xl font-bold flex items-center justify-center">5</div>
                    <div>
                        <h3 class="text-lg font-semibold text-orange-900">Push (推送)</h3>
                        <p class="text-orange-800 text-sm">将你的新分支推送到<strong>你自己的 Fork</strong> (<code>git push origin ...</code>)。</p>
                    </div>
                </div>
                <div class="flex items-center gap-4 bg-orange-50 p-4 rounded-lg border border-orange-200">
                    <div class="flex-shrink-0 w-10 h-10 rounded-full bg-[var(--accent-orange)] text-white text-xl font-bold flex items-center justify-center">6</div>
                    <div>
                        <h3 class="text-lg font-semibold text-orange-900">Create PR (创建拉取请求)</h3>
                        <p class="text-orange-800 text-sm">在 GitCode 网页上，请求原始项目“拉取”你的新分支。</p>
                    </div>
                </div>
                <div class="flex items-center gap-4 bg-orange-50 p-4 rounded-lg border border-orange-200">
                    <div class="flex-shrink-0 w-10 h-10 rounded-full bg-[var(--accent-orange)] text-white text-xl font-bold flex items-center justify-center">7</div>
                    <div>
                        <h3 class="text-lg font-semibold text-orange-900">Review & Merge (审查与合并)</h3>
                        <p class="text-orange-800 text-sm">项目维护者审查你的代码，与你讨论，最终将其合并到主项目！</p>
                    </div>
                </div>
            </div>
        </section>

        <section id="oss-flow" class="my-16">
            <h2 class="section-title"><span class="mr-3">🔁</span> 开源协作流程</h2>
            <div class="grid md:grid-cols-3 gap-6 max-w-6xl mx-auto">
                <!-- Card 1 -->
                <div class="bg-white rounded-xl shadow-lg p-6 border-b-4 border-[var(--brand)]">
                    <h3 class="text-xl font-bold text-[var(--brand)] mb-2">1. Fork项目</h3>
                    <p class="text-[var(--muted)]">创建项目的个人副本</p>
                    <p class="text-[var(--muted)]">获得完全控制权，可自由实验</p>
                </div>
                <!-- Card 2 -->
                <div class="bg-white rounded-xl shadow-lg p-6 border-b-4 border-[var(--accent-purple)]">
                    <h3 class="text-xl font-bold text-[var(--accent-purple)] mb-2">2. 克隆到本地</h3>
                    <p class="text-[var(--muted)]"><code>git clone</code> 你的Fork仓库</p>
                    <p class="text-[var(--muted)]">设置<code>upstream</code>跟踪原始项目</p>
                </div>
                <!-- Card 3 -->
                <div class="bg-white rounded-xl shadow-lg p-6 border-b-4 border-[var(--accent-magenta)]">
                    <h3 class="text-xl font-bold text-[var(--accent-magenta)] mb-2">3. 创建分支开发</h3>
                    <p class="text-[var(--muted)]"><code>git checkout -b</code> 新分支</p>
                    <p class="text-[var(--muted)]">在独立环境中工作，不影响主分支</p>
                </div>
                <!-- Card 4 -->
                <div class="bg-white rounded-xl shadow-lg p-6 border-b-4 border-[var(--accent-red)]">
                    <h3 class="text-xl font-bold text-[var(--accent-red)] mb-2">4. 提交并推送</h3>
                    <p class="text-[var(--muted)]"><code>git add, commit, push</code></p>
                    <p class="text-[var(--muted)]">将更改推送到你的Fork仓库</p>
                </div>
                <!-- Card 5 -->
                <div class="bg-white rounded-xl shadow-lg p-6 border-b-4 border-[var(--accent-orange)]">
                    <h3 class="text-xl font-bold text-[var(--accent-orange)] mb-2">5. 创建Pull Request</h3>
                    <p class="text-[var(--muted)]">请求原始项目合并你的更改</p>
                    <p class="text-[var(--muted)]">进行代码审查和讨论</p>
                </div>
                <!-- Card 6 -->
                <div class="bg-white rounded-xl shadow-lg p-6 border-b-4 border-[var(--brand)]">
                    <h3 class="text-xl font-bold text-[var(--brand)] mb-2">6. 合并到主项目</h3>
                    <p class="text-[var(--muted)]">维护者审查后合并</p>
                    <p class="text-[var(--muted)]">你的贡献成为项目的一部分</p>
                </div>
            </div>
        </section>

        <div class="quote">
            "在数字协作的时代，Git不仅仅是一种工具，更是一种思维方式。"
        </div>

    </div>

    <footer class="bg-[var(--brand)] text-center py-6 mt-16">
        <p class="text-xs text-[var(--brand-light)] opacity-80 mb-1">
            本作品采用CC-BY-SA 4.0国际许可协议进行许可, &copy; 2025 Gitconomy Research社区
        </p>
    </footer>

</body>
</html>
